<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" th:href="@{/css/css_x/abanderar/member-base.css}"/>
    <link rel="stylesheet" th:href="@{/css/css_x/abanderar/login1.css}"/>
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}"/>
    <script th:src="@{/js/cgcjs/jquery-3.2.1.js}"></script>


    <title>用户注册</title>
</head>
<body>
<!--头部-->
<div class="login-header">
    <div class="w-1050">
        <div class="login-header">
            <em class="logo pull-left"><a href="/"></a>
                <img th:src="@{/images/img_x/mmexport1552391564452.jpg}"/>
                <span class="title col-9">用户注册</span>
            </em><span class="about pull-right"><a th:href="@{contactus}">联系我们</a><i class="pull-left line"></i><a
                th:href="@{showmain}">返回首页</a></span>
        </div>
    </div>
</div>
<!--登录-->
<div class="register-box-warp">
    <div class="w-1050">
        <div class="register-body">

            <form th:action="@{/f/t/registerUser}" method="post" id="loginForm" onsubmit="return check()">
                <input type="hidden" id = "flag" th:value="${flag}">
                <div class="user-info pull-left">
                    <ul class="sr-line">

                        <li><span class="name font14">姓名</span>
                            <input class="font14" name="userName" type="text" value="" style="color: black"/>
                            <!--错误提示-->
                            <div class="prompt col-f4" style="display: none">
                                <i class="pull-left"></i>请输入正确的格式!
                            </div>
                        </li>
                        <li><span class="name font14">公司名称</span>
                            <input class="font14" name="company" type="text" value="" style="color: black"/>
                        </li>


                        <select name="sex"
                                style="width: 100%; height: 50px; font-size: 14px;position:relative; border:1px solid #DFDFDF; ">
                            <option value="1">&nbsp;&nbsp;&nbsp;男</option>
                            <option value="0">&nbsp;&nbsp;&nbsp;女</option>
                        </select>

                        <div style="height: 30px;"></div>
                        <li><span class="name font14">电话</span>
                            <input class="font14" name="phoneNumber" id="phoneNumber" type="text" value=""
                                   style="color: black"/>
                        </li>

                        <li><span class="name font14">邮箱</span>
                            <input class="font14" name="mail" id="mail" type="text" autocomplete="off" value=""
                                   style="color: black" onblur="checkEmail()"/>
                        </li>



                        <li><span class="name font14">密码</span>
                            <input class="font14" name="password" type="password" autocomplete="off" id="password"
                                   value="" style="color: black"/>
                        </li>
                        <li><span class="name font14">确认密码</span>
                            <input class="font14" name="confirmPassword" id="confirmPassword" type="password"
                                   autocomplete="off" value="" style="color: black"/>
                        </li>
                        <li><span class="name font14">验证码：</span>
                            <input class="font14" name="authcode" id="authcode" type="text"
                                   autocomplete="off" value="" style="color: black"/>
                        </li>
                        <input type="button" class="register-btn font14 bold" style="background-color: #5d6779" id="btn" value="免费获取验证码" onclick="checkCode()" />



                    </ul>
                    <div class="remember field">
                        <!--验证码-->
                        <input type="hidden" id = "checkCode1">
                    </div>
                    <button class="register-btn font16 bold" type="submit">立即注册</button>
                </div>
            </form>
            <!--我已经帐号-->
            <div class="contact pull-left">
                <div class="login font14">
                    <i></i>已有帐号 <a class="col-f4" th:href="@{/f/t/login}">立即登录</a>
                </div>
                <div class="tel font14">
                    <i></i>
                    <p>
                        服务热线
                    </p>
                    <p>

                    </p>
                </div>
                <div class="prompt">

                    <p>1、港澳台及海外客户请直接联系我司工作人员注册</p>
                    <p>2、注册成功后，您可以用手机号码进行登录</p>
                </div>

                <img th:src="@{/images/smart_imgs/qrcode_wechar.png}" class="mt20"/>
            </div>
            <div class="clearfloat">
            </div>
        </div>
    </div>
</div>

</body>

<script th:inline="javascript">
    var contextPath = [[${#request.getContextPath()}]];
</script>


<script type="text/javascript">

    /*加载页面*/
    $(function () {
        var flag = $("#flag").val();
        if(flag){
            alert("账号(电话号码)已存在，无法注册");
        }
        $("#btn").attr("disabled",true);
    });

    /*邮箱失去焦点*/
    function checkEmail() {
        var mail = $("#mail").val();
        if(mail == null || mail == ""){
            $("#btn").attr("disabled",true);
        }else{
            $("#btn").attr("disabled",false);
        }
    }


    /*验证码*/
    function checkCode() {
        var mail = $("#mail").val();
        var countdown = 60;
        var mailreg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
        if(!mailreg.test(mail)){
            alert("邮箱不符合规则");
        }
        $.ajax({
            type: "post",
            url: contextPath + "/f/t/findregister",
            data:{email:mail},
            success: function (data) {
                document.getElementById("checkCode1").value = data;
                settime();
                function settime(){
                    if (countdown == 0) {
                        $('#btn').attr("disabled",false);
                        $("#btn").val("免费获取验证码");
                        countdown = 60;
                    } else {
                        $('#btn').attr("disabled",true);
                        $("#btn").val("重新获取("+countdown+")");
                        countdown--;
                        setTimeout(settime,1000);
                    }
                }

            }
        })
    };

    function check() {
        var password = $("#password").val();
        var mail = $("#mail").val();
        var phoneNumber = $("#phoneNumber").val();
        var confirmPassword = $("#confirmPassword").val();
        var mailreg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
        var authcode = $("#authcode").val();
        var checkCode = $("#checkCode1").val();
        if(phoneNumber == null || phoneNumber == ""){
            alert("请输入电话号码");
            return false;
        }
        if(!(/^1[3|4|5|8]\d{9}$/.test(phoneNumber))){
            alert("输入电话号码有误");
            return false;
        }
        if(mail == null || mail == ""){
            alert("请输入邮箱地址");
            return false;
        }
        if(!mailreg.test(mail)){
            alert("输入邮箱地址有误！");
            return false;
        }

        if (password == null || password == "" ) {
            alert("请输入密码");
            return false;
        }

        if(!(/^[0-9a-zA-Z]+$/.test(password))){
            alert("密码只能为英文或者数字");
            return false;
        }

        if(confirmPassword == null || confirmPassword == ""){
            alert("请输入确认密码");
            return false;
        }

        if (password != confirmPassword) {
            alert("两次密码输入不一致！");
            return false;
        }
        if(authcode == null || authcode == ""){
            alert("请输入验证码！");
            return false;
        }
        if(authcode != checkCode){
            alert("验证码错误！");
            return false;
        }

        return true;
    }
</script>
</html>
